<template>
	<view class="container">
		<view class="demand-list">
			<view class="demand-item" v-for="(item,index) in listData" :key="item.id" @tap="$myUni.navTo('/pages/demand/detail-demand?id=' + item.id)">
				<view class="flex-x-bet-y-center">
					<view class="title">{{item.demandTitle}}</view>
					<view class="to-detail">查看</view>
				</view>
				<view class="address">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
				<view class="date">{{item.entryTime}}</view>
				<view class="handle-btns flex-y-center">
					<view class="handle-btn" @tap.stop="$myUni.navTo('/pages/demand/form-demand?id=' + item.id)">编辑</view>
					<view class="handle-btn" @tap.stop="unmount(item)">{{item.status == 1 ? '下架' : '上架'}}</view>
					<view class="handle-btn empty-btn" @tap.stop="deleteDemand(item)">删除</view>
				</view>
			</view>
		</view>

		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>

		<Modal ref="modal"></Modal>
	</view>
</template>

<script>
	import { toast } from '../../utils/uni-api'
import {
		demandHall,
		changeStatus,
		deleteDemand
	} from '@/api/demand.js'
	export default {
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					isMine: 1
				},
				listData: [],
				total: 0,
				loadingStatus: 'loading'
			}
		},
		onShow(){
			this.initQuery()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.demandHall()
			}
		},
		methods: {
			demandHall() {
				this.loadingStatus = 'loading'
				demandHall(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			},
			initQuery(){
				this.queryParams.pageNo = 1
				this.listData = []
				this.total = 0
				this.loadingStatus = 'loading'
				this.demandHall()
			},
			deleteDemand(item){
				uni.showModal({
					title:'确定要删除？',
					success: res => {
						if(res.confirm){
							deleteDemand({id: item.id}).then(res => {
								toast('删除成功')
								setTimeout(() => {
									this.initQuery()
								}, 500)
							})
						}
					}
				})
			},
			unmount(item){
				changeStatus({id: item.id, status: item.status == 1 ? 2 : 1}).then(res => {
					toast('操作成功')
					setTimeout(() => {
						this.initQuery()
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.demand-list {
		margin: 30rpx;

		.demand-item {
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-bottom: 30rpx;

			.title {
				font-weight: bold;
				font-size: 33rpx;
				color: #333333;
			}

			.to-detail {
				font-weight: 500;
				font-size: 29rpx;
				color: #FE5A13;
			}

			.address {
				font-weight: normal;
				font-size: 27rpx;
				color: #666666;
				padding: 30rpx 0;
			}

			.date {
				font-weight: normal;
				font-size: 27rpx;
				color: #666666;
			}
		}
	}

	.handle-btns {
		flex-wrap: wrap;
		padding-top: 25rpx;

		.handle-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 58rpx;
			background: linear-gradient(180deg, #FEA413, #FE5A13);
			border-radius: 29rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			border: 1px solid transparent;
			margin-right: 20rpx;
		}

		.empty-btn {
			border: 1px solid $theme-color;
			color: $theme-color;
			background: #fff;
		}
	}
</style>